<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <meta content="width=device-width, initial-scale=1.0" name="viewport">
                <title>
                    音乐播放平台
                </title>
                <link href="./css/music.css" rel="stylesheet">
                </link>
            </meta>
        </meta>
    </head>
    <body>
        <!-- 主体蒙版大盒子 -->
        <div id="big_mask">
            <!-- logo盒子开始 -->
            <div class="logo_box">
                <span class="logo_ico">
                </span>
                <p>
                    博大校园官方音乐平台
                </p>
            </div>
            <!-- logo盒子结束 -->
            <!-- 音乐主体盒子开始 -->
            <div class="music_box" id="music_box">
                <!-- 导航栏开始 -->
                <nav>
                    <h4>
                        兰雨乐坊
                    </h4>
                    <p class="search_box">
                        <input id="search_input" placeholder="请输入歌曲名称或歌手" type="text" v-model="query" v-on:keyup.enter="searchMusic">
                            <i @click="searchMusic">
                            </i>
                        </input>
                    </p>
                </nav>
                <!-- 导航栏结束 -->
                <!-- 侧边列表区域开始 -->
                <div class="scroll_box">
                    <ul class="list_box" id="list_box">
                        <li class="music_li" v-for="item in musiclists">
                            <a>
                                <i @click="palyMusic(item.id)">
                                </i>
                            </a>
                            <p>
                                {{item.name}}
                            </p>
                            <span>
                            </span>
                        </li>
                    </ul>
                </div>
                <!-- 侧边列表区域结束 -->
                <!-- 音乐动画区域开始 -->
                <div class="animation_box">
                    <div :class="{music_bar_dong:isPlaying}" class="music_bar ">
                    </div>
                    <div :class="{diepian_box_dong:isPlaying}" class="diepian_box ">
                        <div class="img_box">
                            <img :src="coverPicUrl">
                            </img>
                        </div>
                    </div>
                </div>
                <!-- 音乐动画区域结束 -->
                <!-- 当前播放标题开始 -->
                <div class="playing_title">
                    当前播放：
                    <span>
                        折子戏
                    </span>
                </div>
                <!-- 当前播放标题结束 -->
                <!-- 评论区开始 -->
                <div class="coment_bigbox">
                    <div class="coment_box">
                        <h5>
                            热门评论
                        </h5>
                        <dl>
                            <dd v-for="item in hotComments">
                                <i>
                                    <img :src="item.user.avatarUrl"/>
                                </i>
                                <b>
                                    {{item.user.nickname}}
                                </b>
                                <div class="coment_con" v-text="item.content">
                                </div>
                            </dd>
                        </dl>
                    </div>
                </div>
                <!-- 评论区结束 -->
                <!-- 底部状态条开始 -->
                <div class="status_box">
                    <audio @pause="pause" @play="play" autoplay="" controls="" loop="" v-bind:src="musicUrl">
                    </audio>
                </div>
                <!-- 底部状态条结束 -->
            </div>
            <!-- 音乐主体盒子结束 -->
        </div>
        <!-- 主体蒙版大盒子结束 -->
    </body>
    <!-- js语法部分 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
    </script>
    <script src="https://unpkg.com/axios/dist/axios.min.js">
    </script>
    <script src="./js/music_vue.js">
    </script>
</html>